<template>
  <div style="border-radius: 10px;max-width: 930px;background-color: #ffffff;color: #666666;">
    <h1 style="padding-left: 5px"><right-outlined />{{type}}</h1>
  </div>
  <div v-for="(item,index) in currentEssayList"
       :key="index"
       style="padding-bottom: 15px;"
       v-loading="loading"

  >
    <a-card @click="handleClickCard(item.essayId)" hoverable  style="border-radius: 10px;max-width: 930px;background-color: #ffffff" >
      <a-card-meta >
        <template #title><h2>{{item.title}}</h2></template>

        <template #description><calendar-filled />发布时间:{{item.datetime}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
          <folder-open-filled />类别:&nbsp;{{item.category}}
        </template>
      </a-card-meta>
      <br/>
      <title style="overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    color: #999999;
                    -webkit-box-orient: vertical;">{{item.content}}</title>
    </a-card>
  </div>
  <div style="text-align: center">
    <a-pagination v-model:current="currentPage" :defaultPageSize="8" :total="essayList.length" @change="changePage" />
  </div>
</template>

<script setup>
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref, watchEffect} from "vue";
import {CalendarFilled,FolderOpenFilled,RightOutlined} from '@ant-design/icons-vue';
import request from "@/utils/request";

const essayList=ref([])
const store = useStore()
const router=useRouter()
const route=useRoute()
const type=ref('')
const currentPage=ref(1)
const currentEssayList=ref([])
const loading=ref(false)

watchEffect(()=>{

  console.log("route.params.type   :",route.params.type,"route.params.category   :",route.params.category)
  if (route.params.type!==undefined){
    if (route.params.type[0]==="label"){
      type.value='标签 - '+route.params.category[0]
      request.get("essay/getset/bylabel/"+route.params.category[0]).then(res=>{
        console.log("essayListByLabel  :",res.data)
        essayList.value=res.data
        currentEssayList.value=essayList.value.slice((1-1)*8,1*8)
      })
    }else {
      type.value='类别 - '+route.params.category[0]
      request.get("essay/getset/bycategory/"+route.params.category[0]).then(res=>{
        console.log("essayListByLabel  :",res.data)
        essayList.value=res.data
        currentEssayList.value=essayList.value.slice((1-1)*8,1*8)
      })
    }
  }
})
// onMounted(()=>{
//   currentEssayList.value=essayList.value.slice((1-1)*2,1*2)
// })

const changePage=(page)=>{
  console.log("page  :",page)
  currentEssayList.value=essayList.value.slice((page-1)*8,page*8)
  currentPage.value=page

  const timer = setInterval(function () {
    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
    let ispeed = Math.floor(-osTop / 5);
    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
    this.isTop = true;
    if (osTop === 0) {
      clearInterval(timer);
    }
  }, 10);
}

const handleClickCard=(essayId)=>{
  const timer = setInterval(function () {
    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
    let ispeed = Math.floor(-osTop / 5);
    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
    this.isTop = true;
    if (osTop === 0) {
      clearInterval(timer);
    }
  }, 10);
  router.push("/visitor/preview/"+essayId)
}
</script>

<style scoped>

</style>